import React from 'react';
import InteractiveSpan from './InteractiveSpan';

const SpanVisualization: React.FC = () => {
  return (
    <div className="container mx-auto p-4 space-y-8">
      <h1 className="text-3xl font-bold text-center mb-6">Span 元素可视化演示</h1>
      
      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">基本用法</h2>
        <p>
          这是一个普通的段落。<span className="font-bold text-blue-600">这是一个 span 元素</span>，它不会打断文本流。
        </p>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">内联样式</h2>
        <p>
          Span 可以用来添加<span className="underline">下划线</span>、
          <span className="italic">斜体</span>、
          <span className="font-bold">粗体</span>或
          <span className="text-red-500">颜色</span>到文本的特定部分。
        </p>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">多重样式</h2>
        <p>
          你可以组合多个样式：
          <span className="font-bold italic text-green-600 underline">
            这个 span 同时有粗体、斜体、颜色和下划线
          </span>
        </p>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">语义标记</h2>
        <p>
          Span 可以用于语义标记，比如标记一个<span className="bg-yellow-200">重要概念</span>或
          <span className="border-b border-dotted border-gray-500" title="这是一个术语的定义">专业术语</span>。
        </p>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">响应式设计</h2>
        <p className="text-sm sm:text-base md:text-lg lg:text-xl">
          这个段落的<span className="font-bold">字体大小</span>会随着屏幕尺寸变化。
          <span className="hidden sm:inline">这部分文本在小屏幕上不可见。</span>
        </p>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">交互效果</h2>
        <p>
          Span 也可以用于添加交互效果：
          <InteractiveSpan />
        </p>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">可访问性考虑</h2>
        <p>
          使用 span 时要考虑可访问性：
          <span className="sr-only">这段文本只有屏幕阅读器可以读到</span>
          <span aria-label="重要" role="img" className="text-2xl">⚠️</span>
        </p>
      </section>
    </div>
  );
};

export default SpanVisualization;

